<template>
    <view>
        <view class='information'>
            <text class='subject'>预约服务：{{order.project.name}}</text>
            <text class='subject'>预约时间：{{order.createtime}}</text>
            <text class='subject'>服务费用：{{order.price}}</text>
            <text class='subject'>上门地址：{{order.address.address_text}}</text>
            <text class='subject'>预约状态：{{order.status_text}}</text>
            <!-- <text class='end-time begin-time'></text> -->
        </view>

        <view class="steps">
            <u-steps :current="current" direction="column">
                <u-steps-item title="未接单" desc="订单等待师傅接单" v-if="order.status == 0 || order.status > 0">
                </u-steps-item>
                <u-steps-item title="已接单" desc="已完成" v-if="order.status >= 1 || order.status < 0">
                </u-steps-item>
                <u-steps-item title="未付款" desc="等待付款中" v-if="order.status == 1 || order.status < 0">
                </u-steps-item>
                <u-steps-item title="已付款" desc="已完成" v-if="order.status > 1 || order.status < 0">
                </u-steps-item>
                <u-steps-item title="等待师傅上门" desc="等待中" v-if="order.status == 2 || order.status < 0">
                </u-steps-item>
                <u-steps-item title="预约服务已完成" desc="已完成" v-if="order.status >= 3">
                </u-steps-item>
                <u-steps-item title="待评价" desc="等待中" v-if="order.status == 3 && !order.rate">
                </u-steps-item>

                <u-steps-item title="已评价" :desc="order.rate + '分'" v-if="order.status == 3 && order.rate">
                </u-steps-item>
                
            </u-steps>
        </view>

        <!-- 消息提示的组件 -->
		<u-toast ref="notice"></u-toast>
    </view>
</template>
<script>
export default {
    onLoad(option)
    {
        let orderid = option.orderid

        this.orderid = orderid
        
    },

    onShow()
    {
        this.Info()
    },
    data()
    {
        return {
            orderid:0,
            order:{},
            current:0
        }
    },
    methods: {
        async Info()
        {
            let data = {
                orderid:this.orderid
            }

            let result = await this.$u.api.project.OrderInfo(data)

            if(result.code === 0)
            {
                this.$refs.notice.show({
                    type:'error',
                    message:result.msg,
                    icon:true,
                    complete:() => {
                        this.$u.route({
                            type:'navigateBack',
                            delta:1
                        })
                    }
                })

                return false
            }

            console.log(result.data.status)

            // switch (Number(result.data.status)) {
            //     case 0:
            //         this.current = 0
            //         break;
            //     case 1:
            //         this.current = 1
            //         break;
            //     case 2:
            //         this.current = 2
            //         break;

            //     default:
            //         break;
            // }

            // console.log(this.current)
            this.current = result.data.status

            this.order = result.data
        }
    },
}
</script>

<style>
.information{
  border-top: 1rpx solid rgb(194, 194, 194);
  border-bottom: 30rpx solid rgb(240, 240, 240);
  padding: 30rpx;
  box-shadow: 0 0 10px #DDD;
}
.begin-time, .end-time{
  font-size: 30rpx;
  color: rgb(140, 140, 140);
}
.information text{
  
  display: block;
  margin-top: 10px;
  
}
.steps{
    width: 80%;
    margin: 0 auto;
}
</style>